<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside :width="isCollapse ? '64px' : '250px'">
            <div class="aside-header">
                <div class="el-aside__logo"></div>
                <div class="toggle-button" @click="toggleMenu"><Fold style="width: 30px;color: rgb(213, 218, 222);" /></div>
            </div>
            
            <el-menu :collapse="isCollapse" background-color="#6b8bda" text-color="white" router>
                <el-menu-item index="/column/manage">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>栏目管理</span>
                </el-menu-item>
                <el-menu-item index="/article/manage">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>文章管理</span>
                </el-menu-item>
                <!-- <el-sub-menu>
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item index="/admin/role">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>角色管理</span>
                    </el-menu-item>
                    <el-menu-item index="/log/manage">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>日志管理</span>
                    </el-menu-item>
                </el-sub-menu> -->
                <el-sub-menu>
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/admin/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/avatar">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/resetPassword">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div style="color: rgb(253, 253, 253);font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">管理员：<strong>{{ adminInfo.info.username }}</strong></div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="adminInfo.info.userPic ? adminInfo.info.userPic : avatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="resetpassword" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <router-view />
            </el-main>

        </el-container>
    </el-container>
</template>


<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom,
    Setting,
    Document
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Fold } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore();
const router = useRouter();
import { adminInfoService } from '@/api/admin.js'
import useAdminInfoStore from '@/stores/adminInfo.js'
const adminInfo = useAdminInfoStore()
const getAdminInfo = async () => {
    let result = await adminInfoService();
    // console.log("登录哈哈哈哈哈哈哈哈哈",result.data);
    adminInfo.setInfo(result.data);
    
    // 检查密码是否过期
    if (result.data.passwordUpdateTime) {
        const lastUpdate = new Date(result.data.passwordUpdateTime);
        const now = new Date();
        const daysSinceUpdate = Math.floor((now - lastUpdate) / (1000 * 60 * 60 * 24));
        
        if (daysSinceUpdate >= 90) {
            ElMessageBox.alert(
                '您的密码已超过90天未修改，请立即修改密码',
                '密码过期提醒',
                {
                    confirmButtonText: '前往修改',
                    callback: () => {
                        router.push('/admin/resetpassword');
                    }
                }
            );
        } else{
            ElMessage({
                message: `您的密码将在${90 - daysSinceUpdate}天后过期，请及时修改`,
                type: 'warning'
            });
        }
    }
}
getAdminInfo();

import { ref } from 'vue';

const isCollapse = ref(false);
const toggleMenu = () => {
    isCollapse.value = !isCollapse.value; // 切换菜单的展开和收缩状态
}
const handleCommand = (command)=>{
    //判断指令
    if(command === 'logout'){
        //退出登录
        ElMessageBox.confirm(
        '您确认要退出吗?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //退出登录
            //1.清空pinia中存储的token以及个人信息
            tokenStore.removeToken()
            adminInfo.removeInfo()

            //2.跳转到登录页面
            router.push('/login')
            ElMessage({
                type: 'success',
                message: '退出登录成功',
            })
            
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消了退出登录',
            })
        })
    }else{
        //路由
        router.push('/admin/'+command)
    }
}
</script>

<style lang="scss" scoped>
.layout-container {
    background-color: #ffffff;
    height: 100vh;

.toggle-button{
    width: 65px;
    height: 30px;
    border-radius: 2px;
}
    .el-aside {
        transition: width 0.3s; // 添加过渡效果
        background-color: #6b8bda;

        &__logo {
            height: 60px;
            background: url('@/assets/JinanLogo.png') no-repeat center / 200px auto;
        }

        .toggle-button {
            background-color: #34343456;
            font-size: 10px;
            line-height: 24px;
            color: #fff;
            text-align: center;
            letter-spacing: 0.2em;
            cursor: pointer;
        }

        .el-menu {
            border-right: none;

            // 选中菜单项的样式
            .el-menu-item.is-active {
                background-color: hsla(216, 45%, 87%, 0.506) !important; // 选中时的背景颜色
                color: rgb(255, 255, 255) !important; // 选中时的字体颜色
            }

            // 菜单项悬停效果
            .el-menu-item:hover {
                background-color: #34343456; // 悬停时的背景颜色
            }
        }
    }

    .el-header {
        background-color: #86a0e0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
                cursor: pointer; // 更改鼠标样式为指针，表示可点击
            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}
</style>